<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>天气状况</title>
	<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
	<link rel="stylesheet" href="../../static/sa.css">
	<style>
		.weather-container {
			padding: 20px;
			max-width: 1400px;
			margin: 0 auto;
		}
		.page-title {
			margin-bottom: 25px;
		}
		.page-title h2 {
			margin: 0 0 8px 0;
			color: #333;
			font-size: 24px;
		}
		.page-title p {
			margin: 0;
			color: #666;
			font-size: 14px;
		}
		
		/* 当前天气卡片 */
		.current-weather {
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: white;
			border-radius: 15px;
			padding: 30px;
			margin-bottom: 25px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-shadow: 0 8px 30px rgba(102, 126, 234, 0.3);
		}
		.weather-main {
			display: flex;
			align-items: center;
			gap: 20px;
		}
		.weather-icon {
			font-size: 64px;
			filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
		}
		.weather-temp {
			font-size: 48px;
			font-weight: bold;
			margin-bottom: 5px;
		}
		.weather-desc {
			font-size: 18px;
			opacity: 0.9;
		}
		.weather-location {
			font-size: 14px;
			opacity: 0.8;
			margin-top: 5px;
		}
		.weather-details {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 15px;
			text-align: center;
		}
		.detail-item {
			background: rgba(255,255,255,0.1);
			padding: 15px;
			border-radius: 10px;
		}
		.detail-value {
			font-size: 24px;
			font-weight: bold;
			margin-bottom: 5px;
		}
		.detail-label {
			font-size: 14px;
			opacity: 0.8;
		}
		
		/* 布局网格 */
		.weather-grid {
			display: grid;
			grid-template-columns: 2fr 1fr;
			gap: 25px;
			margin-bottom: 25px;
		}
		.weather-left {
			display: flex;
			flex-direction: column;
			gap: 25px;
		}
		.weather-right {
			display: flex;
			flex-direction: column;
			gap: 25px;
		}
		
		/* 通用卡片样式 */
		.weather-card {
			background: #fff;
			border-radius: 12px;
			padding: 25px;
			box-shadow: 0 4px 20px rgba(0,0,0,0.08);
		}
		.card-title {
			font-size: 18px;
			font-weight: 600;
			color: #333;
			margin-bottom: 20px;
			display: flex;
			align-items: center;
			gap: 10px;
		}
		
		/* 7天预报 */
		.forecast-grid {
			display: grid;
			grid-template-columns: repeat(7, 1fr);
			gap: 15px;
		}
		.forecast-item {
			text-align: center;
			padding: 15px 10px;
			border-radius: 8px;
			transition: background-color 0.2s;
		}
		.forecast-item:hover {
			background: #f8f9fa;
		}
		.forecast-date {
			font-size: 14px;
			font-weight: 500;
			color: #333;
			margin-bottom: 8px;
		}
		.forecast-icon {
			font-size: 32px;
			margin: 8px 0;
		}
		.forecast-temp {
			font-size: 14px;
			color: #666;
		}
		.temp-high {
			font-weight: bold;
			color: #e74c3c;
		}
		.temp-low {
			color: #3498db;
		}
		
		/* 详细信息网格 */
		.info-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 15px;
		}
		.info-item {
			display: flex;
			align-items: center;
			gap: 12px;
			padding: 15px;
			background: #f8f9fa;
			border-radius: 8px;
		}
		.info-icon {
			font-size: 24px;
			color: #667eea;
		}
		.info-content {
			flex: 1;
		}
		.info-label {
			font-size: 14px;
			color: #666;
			margin-bottom: 4px;
		}
		.info-value {
			font-size: 16px;
			font-weight: 500;
			color: #333;
		}
		
		/* 气象预警 */
		.alert-item {
			display: flex;
			align-items: center;
			gap: 12px;
			padding: 15px;
			border-radius: 8px;
			margin-bottom: 10px;
		}
		.alert-high {
			background: #fff1f0;
			border: 1px solid #ffccc7;
		}
		.alert-medium {
			background: #fff7e6;
			border: 1px solid #ffd591;
		}
		.alert-low {
			background: #f6ffed;
			border: 1px solid #b7eb8f;
		}
		.alert-icon {
			font-size: 20px;
		}
		.alert-icon.high {
			color: #ff4d4f;
		}
		.alert-icon.medium {
			color: #fa8c16;
		}
		.alert-icon.low {
			color: #52c41a;
		}
		.alert-content {
			flex: 1;
		}
		.alert-title {
			font-weight: 500;
			margin-bottom: 4px;
		}
		.alert-desc {
			font-size: 14px;
			color: #666;
		}
		
		/* 冷链运输建议 */
		.tips-section {
			background: #f0f9ff;
			border: 1px solid #b3d8ff;
			border-radius: 8px;
			padding: 20px;
		}
		.tips-title {
			font-weight: bold;
			color: #1890ff;
			margin-bottom: 15px;
			display: flex;
			align-items: center;
			gap: 8px;
		}
		.tips-list {
			display: grid;
			gap: 10px;
		}
		.tip-item {
			display: flex;
			align-items: flex-start;
			gap: 8px;
			color: #666;
			line-height: 1.5;
		}
		.tip-icon {
			color: #1890ff;
			margin-top: 2px;
		}
		
		/* 温度趋势图 */
		.chart-container {
			height: 300px;
			margin-top: 15px;
		}
		
		/* 响应式设计 */
		@media (max-width: 1200px) {
			.weather-grid {
				grid-template-columns: 1fr;
			}
			.forecast-grid {
				grid-template-columns: repeat(4, 1fr);
			}
		}
		@media (max-width: 768px) {
			.current-weather {
				flex-direction: column;
				gap: 20px;
				text-align: center;
			}
			.weather-details {
				grid-template-columns: repeat(3, 1fr);
			}
			.forecast-grid {
				grid-template-columns: repeat(2, 1fr);
			}
			.info-grid {
				grid-template-columns: 1fr;
			}
		}
	</style>
</head>
<body>
	<div id="app" v-cloak>
		<div class="weather-container">
			<!-- 页面标题 -->
			<div class="page-title">
				<h2>衡阳地区天气状况</h2>
				<p>衡阳实时天气信息与冷链运输气象分析</p>
			</div>

			<!-- 当前天气 -->
			<div class="current-weather">
				<div class="weather-main">
					<div class="weather-icon">{{currentWeather.icon}}</div>
					<div>
						<div class="weather-temp">{{currentWeather.temperature}}°C</div>
						<div class="weather-desc">{{currentWeather.description}}</div>
						<div class="weather-location">{{currentWeather.location}} | {{currentWeather.updateTime}}</div>
					</div>
				</div>
				<div class="weather-details">
					<div class="detail-item">
						<div class="detail-value">{{currentWeather.humidity}}%</div>
						<div class="detail-label">湿度</div>
					</div>
					<div class="detail-item">
						<div class="detail-value">{{currentWeather.windSpeed}}</div>
						<div class="detail-label">风速</div>
					</div>
					<div class="detail-item">
						<div class="detail-value">{{currentWeather.pressure}}</div>
						<div class="detail-label">气压</div>
					</div>
				</div>
			</div>

			<!-- 主要内容网格 -->
			<div class="weather-grid">
				<!-- 左侧内容 -->
				<div class="weather-left">
					<!-- 7天天气预报 -->
					<div class="weather-card">
						<div class="card-title">
							<i class="el-icon-date"></i>
							7天天气预报
						</div>
						<div class="forecast-grid">
							<div v-for="day in forecast" :key="day.date" class="forecast-item">
								<div class="forecast-date">{{day.date}}</div>
								<div class="forecast-icon">{{day.icon}}</div>
								<div class="forecast-temp">
									<span class="temp-high">{{day.tempHigh}}°</span> / 
									<span class="temp-low">{{day.tempLow}}°</span>
								</div>
								<div style="font-size: 12px; color: #999; margin-top: 4px;">{{day.desc}}</div>
							</div>
						</div>
					</div>

					<!-- 详细气象信息 -->
					<div class="weather-card">
						<div class="card-title">
							<i class="el-icon-data-analysis"></i>
							详细气象信息
						</div>
						<div class="info-grid">
							<div class="info-item">
								<i class="el-icon-view info-icon"></i>
								<div class="info-content">
									<div class="info-label">能见度</div>
									<div class="info-value">{{weatherDetails.visibility}}</div>
								</div>
							</div>
							<div class="info-item">
								<i class="el-icon-sunny info-icon"></i>
								<div class="info-content">
									<div class="info-label">紫外线指数</div>
									<div class="info-value">{{weatherDetails.uvIndex}}</div>
								</div>
							</div>
							<div class="info-item">
								<i class="el-icon-cloudy info-icon"></i>
								<div class="info-content">
									<div class="info-label">云量</div>
									<div class="info-value">{{weatherDetails.cloudCover}}</div>
								</div>
							</div>
							<div class="info-item">
								<i class="el-icon-umbrella info-icon"></i>
								<div class="info-content">
									<div class="info-label">降水概率</div>
									<div class="info-value">{{weatherDetails.precipitation}}</div>
								</div>
							</div>
							<div class="info-item">
								<i class="el-icon-magic-stick info-icon"></i>
								<div class="info-content">
									<div class="info-label">体感温度</div>
									<div class="info-value">{{weatherDetails.feelsLike}}°C</div>
								</div>
							</div>
							<div class="info-item">
								<i class="el-icon-sunrise info-icon"></i>
								<div class="info-content">
									<div class="info-label">日出/日落</div>
									<div class="info-value">{{weatherDetails.sunrise}} / {{weatherDetails.sunset}}</div>
								</div>
							</div>
						</div>
					</div>

					<!-- 温度趋势分析 -->
					<div class="weather-card">
						<div class="card-title">
							<i class="el-icon-trending-up"></i>
							24小时温度趋势
						</div>
						<div class="chart-container" id="temperatureChart"></div>
					</div>
				</div>

				<!-- 右侧内容 -->
				<div class="weather-right">
					<!-- 气象预警 -->
					<div class="weather-card">
						<div class="card-title">
							<i class="el-icon-warning"></i>
							气象预警信息
						</div>
						<div v-if="alerts.length === 0" style="text-align: center; color: #999; padding: 20px;">
							<i class="el-icon-check" style="font-size: 32px; margin-bottom: 10px;"></i>
							<p>暂无气象预警</p>
						</div>
						<div v-else>
							<div v-for="alert in alerts" :key="alert.id" 
								:class="['alert-item', 'alert-' + alert.level]">
								<i :class="['alert-icon', 'el-icon-warning', alert.level]"></i>
								<div class="alert-content">
									<div class="alert-title">{{alert.title}}</div>
									<div class="alert-desc">{{alert.description}}</div>
								</div>
							</div>
						</div>
					</div>

					<!-- 冷链运输建议 -->
					<div class="weather-card">
						<div class="tips-section">
							<div class="tips-title">
								<i class="el-icon-truck"></i>
								冷链运输建议
							</div>
							<div class="tips-list">
								<div v-for="tip in transportTips" :key="tip.id" class="tip-item">
									<i class="el-icon-right tip-icon"></i>
									<span>{{tip.content}}</span>
								</div>
							</div>
						</div>
					</div>

					<!-- 空气质量指数 -->
					<div class="weather-card">
						<div class="card-title">
							<i class="el-icon-data-board"></i>
							空气质量指数
						</div>
						<div class="info-grid">
							<div class="info-item">
								<i class="el-icon-star-on info-icon"></i>
								<div class="info-content">
									<div class="info-label">AQI指数</div>
									<div class="info-value" :style="'color: ' + getAQIColor(airQuality.aqi)">
										{{airQuality.aqi}} ({{airQuality.level}})
									</div>
								</div>
							</div>
							<div class="info-item">
								<i class="el-icon-remove info-icon"></i>
								<div class="info-content">
									<div class="info-label">PM2.5</div>
									<div class="info-value">{{airQuality.pm25}} μg/m³</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- 引入依赖 -->
	<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
	<script src="https://unpkg.com/echarts@5.4.3/dist/echarts.min.js"></script>
	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					currentWeather: {
						temperature: 18,
						description: '多云转晴',
						location: '衡阳市',
						updateTime: '2024-01-20 14:30',
						humidity: 72,
						windSpeed: '2级东南风',
						pressure: '1015 hPa',
						icon: '🌤️'
					},
					forecast: [
						{date: '今天', icon: '🌤️', tempHigh: 22, tempLow: 12, desc: '多云转晴'},
						{date: '明天', icon: '☀️', tempHigh: 24, tempLow: 14, desc: '晴'},
						{date: '后天', icon: '⛅', tempHigh: 20, tempLow: 10, desc: '多云'},
						{date: '周四', icon: '🌦️', tempHigh: 18, tempLow: 8, desc: '小雨'},
						{date: '周五', icon: '☀️', tempHigh: 26, tempLow: 16, desc: '晴'},
						{date: '周六', icon: '🌤️', tempHigh: 23, tempLow: 13, desc: '多云'},
						{date: '周日', icon: '⛅', tempHigh: 21, tempLow: 11, desc: '阴'}
					],
					weatherDetails: {
						visibility: '12公里',
						uvIndex: '中等偏强（7）',
						cloudCover: '35%',
						precipitation: '15%',
						feelsLike: 20,
						sunrise: '06:52',
						sunset: '18:15'
					},
					alerts: [
						{
							id: 1,
							level: 'low',
							title: '衡阳地区大雾黄色预警',
							description: '预计今夜到明晨衡阳部分地区将出现能见度小于500米的雾，请注意冷链运输安全'
						}
					],
					airQuality: {
						aqi: 68,
						level: '良',
						pm25: 28
					},
					temperatureData: []
				}
			},
			computed: {
				transportTips() {
					const tips = [];
					const temp = this.currentWeather.temperature;
					const humidity = this.currentWeather.humidity;
					
					if (temp < 5) {
						tips.push({id: 1, content: '衡阳地区气温偏低，湘莲等根茎类特产需注意防冻保存'});
						tips.push({id: 2, content: '建议增加冷藏车保温措施，确保衡阳特产运输安全'});
					} else if (temp > 30) {
						tips.push({id: 1, content: '衡阳高温天气，黄花菜等干货类特产需加强制冷保护'});
						tips.push({id: 2, content: '避免高温时段运输，选择早晚配送衡阳特产到长沙等地'});
					} else {
						tips.push({id: 1, content: '衡阳天气条件良好，适合湘莲、茶油等特产冷链运输'});
					}
					
					if (humidity > 80) {
						tips.push({id: 3, content: '衡阳湿度较高，黄花菜等干制品需特别注意防潮措施'});
					}
					
					if (this.forecast[0].desc.includes('雨')) {
						tips.push({id: 4, content: '衡阳有降雨天气，京港澳高速衡阳段行车需谨慎，延长运输时间'});
					}
					
					tips.push({id: 5, content: '建议实时监控湘莲、茶油等特产运输温度，确保从衡阳到目的地冷链完整'});
					tips.push({id: 6, content: '衡阳地区特产运输建议温度：湘莲2-4℃，黄花菜干燥环境，茶油常温避光'});
					
					return tips;
				}
			},
			methods: {
				getAQIColor(aqi) {
					if (aqi <= 50) return '#52c41a';
					if (aqi <= 100) return '#faad14';
					if (aqi <= 150) return '#fa8c16';
					if (aqi <= 200) return '#ff4d4f';
					return '#722ed1';
				},
				
				initTemperatureChart() {
					const chart = echarts.init(document.getElementById('temperatureChart'));
					
					// 模拟24小时温度数据 - 适应衡阳地区气候特点
					const hours = [];
					const temperatures = [];
					for (let i = 0; i < 24; i++) {
						hours.push(i + ':00');
						// 衡阳地区温度范围调整为10-25度，体现南方气候特点
						temperatures.push(Math.round(Math.random() * 15 + 10)); 
					}
					
					const option = {
						tooltip: {
							trigger: 'axis',
							formatter: '{b}: {c}°C'
						},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						xAxis: {
							type: 'category',
							data: hours,
							axisLine: {
								lineStyle: {
									color: '#ccc'
								}
							}
						},
						yAxis: {
							type: 'value',
							axisLabel: {
								formatter: '{value}°C'
							},
							axisLine: {
								lineStyle: {
									color: '#ccc'
								}
							}
						},
						series: [{
							name: '温度',
							type: 'line',
							data: temperatures,
							smooth: true,
							lineStyle: {
								color: '#667eea',
								width: 3
							},
							areaStyle: {
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0, color: 'rgba(102, 126, 234, 0.3)'
									}, {
										offset: 1, color: 'rgba(102, 126, 234, 0.05)'
									}]
								}
							},
							symbol: 'circle',
							symbolSize: 6,
							itemStyle: {
								color: '#667eea'
							}
						}]
					};
					
					chart.setOption(option);
					
					// 响应式调整
					window.addEventListener('resize', () => {
						chart.resize();
					});
				},
				
				updateWeatherData() {
					// 模拟衡阳地区天气数据更新
					const temps = [8, 12, 15, 18, 22, 25, 28, 32]; // 适应衡阳气候的温度范围
					const randomTemp = temps[Math.floor(Math.random() * temps.length)];
					this.currentWeather.temperature = randomTemp;
					this.currentWeather.updateTime = new Date().toLocaleString('zh-CN', {
						month: '2-digit',
						day: '2-digit',
						hour: '2-digit',
						minute: '2-digit'
					});
					
					this.$message.success('衡阳地区天气数据已更新');
				}
			},
			
			mounted() {
				// 初始化图表
				this.$nextTick(() => {
					this.initTemperatureChart();
				});
				
				// 模拟定时更新天气数据
				setInterval(() => {
					this.updateWeatherData();
				}, 300000); // 5分钟更新一次
			}
		});
	</script>
</body>
</html>